<template>
  <div id="departmentList">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="searchList"></topSearch>
    <div class="table-conBtn">
      <el-button
        type="warning"
        icon="el-icon-plus"
        v-permission="'wh:system:dept:add'"
        @click="addEditDepartment('add')"
      >
        新增
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="deptId"
      default-expand-all
      stripe
      :tree-props="{ children: 'childs', hasChildren: 'childs.length > 0' }"
    >
      <el-table-column
        prop="deptName"
        label="部门名称"
        width="200"
      ></el-table-column>
      <el-table-column
        prop="orderNum"
        label="排序"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="状态"
        align="center"
        max-width="200"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.status"
            class="tag-span"
            :class="scope.row.status | filterClass('sysNormalDisable')"
            >{{ scope.row.status | filterName('sysNormalDisable') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="300"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="210">
        <template slot-scope="scope">
          <el-button
            v-permission="'wh:system:dept:edit'"
            type="text"
            @click="addEditDepartment('edit', scope.row.deptId)"
          >
            编辑
          </el-button>
          <el-button
            v-permission="'wh:system:dept:remove'"
            type="text"
            @click="handledelDepartment(scope.row.deptId)"
          >
            删除
          </el-button>
          <el-button type="text" @click="addEditDepartment('add', scope.row)">
            添加下级部门
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增/编辑角色dialog -->
    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="searchList"
    ></dialogAddEdit>
  </div>
</template>

<script>
import { getDepartsList, delDeparts } from '@/api/system/department' // 接口
import topSearch from '@component/system/department/topSearch' // 上部搜索条件
import dialogAddEdit from '@component/system/department/dialogAddEdit' // 新增/编辑
export default {
  name: 'department',
  msg: '部门管理',
  components: {
    topSearch,
    dialogAddEdit
  },
  data() {
    return {
      loading: false,
      defaultAll: false,
      tableData: [], // table内容
      formInline: {
        // 搜索条件
        deptName: '', // 部门名称
        status: '' // 部门状态,默认所有
      },
      dialogData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        params: '' // 编辑时，传递的参数
      },
      multipleSelection: []
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = { ...this.formInline }
      getDepartsList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    // 展开折叠
    // handelDefaultAll () {
    //   this.defaultAll = !this.defaultAll
    // },
    // 新增/编辑
    addEditDepartment(type, params = '') {
      this.dialogData.isShow = true
      this.dialogData.type = type
      // type='add',params有内容时，为“添加下级菜单”。params为对象
      // type='edit',为“编辑”。params为Number类型id
      this.dialogData.params = params
    },
    // 删除
    handledelDepartment(id) {
      this.$confirm('确认删除该部门?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delDeparts(
          id,
          (response) => {
            this.searchList()
          },
          (response) => {
            this.$message.warning(response.message)
          }
        )
      })
    }
  }
}
</script>

<style lang="less">
#departmentList {
  .el-table {
    tr {
      th {
        &:first-child {
          padding-left: 20px;
        }
      }
      td {
        &:first-child {
          .cell {
            padding-left: 20px;
          }
        }
      }
    }
  }
}
</style>
